<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的考试 - 在线考试系统</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --student-accent: #4361ee;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            padding: 2rem 0;
        }

        .page-header {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background-color: var(--student-accent);
        }

        .page-title {
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--student-accent);
        }

        .page-subtitle {
            color: #6c757d;
            margin-bottom: 0;
        }

        /* 表格样式 */
        .table-container {
            background: white;
            border-radius: 15px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
        }

        .table {
            margin-bottom: 0;
        }

        .table thead th {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            font-weight: 600;
            padding: 1rem;
        }

        .table tbody td {
            padding: 1rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            vertical-align: middle;
        }

        .table tbody tr:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }

        /* 状态徽章 */
        .badge {
            padding: 0.5rem 0.75rem;
            font-weight: 600;
            border-radius: 8px;
        }

        .badge.bg-secondary {
            background: linear-gradient(135deg, #6c757d, #495057) !important;
        }

        .badge.bg-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
        }

        .badge.bg-success {
            background: linear-gradient(135deg, #28a745, #20c997) !important;
        }

        /* 按钮样式 */
        .btn {
            border-radius: 8px;
            font-weight: 600;
            padding: 0.5rem 1rem;
            transition: var(--transition);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--student-accent), #3a0ca3);
            border: none;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        .btn-warning {
            background: linear-gradient(135deg, #ffc107, #fd7e14);
            border: none;
            color: white;
        }

        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
        }

        .btn-info {
            background: linear-gradient(135deg, #17a2b8, #138496);
            border: none;
        }

        .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(23, 162, 184, 0.4);
        }

        /* 分数显示 */
        .score-pending {
            color: #fd7e14;
            font-weight: 600;
        }

        .score-display {
            font-weight: 600;
            color: var(--student-accent);
        }

        /* 页脚样式 */
        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }

        .footer-title {
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: white;
            text-decoration: underline;
        }

        .copyright {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem;
            }

            .page-header {
                padding: 1rem;
            }

            .table-responsive {
                border-radius: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/student/home">
                <i class="fas fa-graduation-cap"></i>在线考试系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/student/exam/list"><i class="fas fa-pen-alt"></i> 考试信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/student/score/analysis"><i class="fas fa-chart-line"></i> 成绩分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/student/resources"><i class="fas fa-book-open"></i> 学习资源</a>
                    </li>
                </ul>

                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/student/profile/manage">
                            <i class="fas fa-user-circle"></i> 个人信息
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">
                            <i class="fas fa-sign-out-alt"></i> 退出登录
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="container">
            <div class="page-header">
                <h2 class="page-title"><i class="fas fa-pen-alt me-2"></i>我的考试</h2>
                <p class="page-subtitle">查看您的所有考试信息，包括考试状态和成绩</p>
            </div>
            
            <div class="table-container">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><i class="fas fa-file-alt me-1"></i>考试名称</th>
                                <th><i class="fas fa-book me-1"></i>课程</th>
                                <th><i class="fas fa-tag me-1"></i>考试类型</th>
                                <th><i class="fas fa-calendar-alt me-1"></i>开始时间</th>
                                <th><i class="fas fa-clock me-1"></i>结束时间</th>
                                <th><i class="fas fa-hourglass-half me-1"></i>时长(分钟)</th>
                                <th><i class="fas fa-star me-1"></i>总分</th>
                                <th><i class="fas fa-info-circle me-1"></i>状态</th>
                                <th><i class="fas fa-trophy me-1"></i>得分</th>
                                <th><i class="fas fa-cogs me-1"></i>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="exam : ${examList}">
                                <td>
                                    <strong th:text="${exam.examName}"></strong>
                                </td>
                                <td th:text="${exam.courseName}"></td>
                                <td>
                                    <span class="badge bg-light text-dark" th:text="${exam.examType}"></span>
                                </td>
                                <td th:text="${#temporals.format(exam.startTime, 'yyyy-MM-dd HH:mm')}"></td>
                                <td th:text="${#temporals.format(exam.endTime, 'yyyy-MM-dd HH:mm')}"></td>
                                <td th:text="${exam.duration}"></td>
                                <td>
                                    <span class="score-display" th:text="${exam.totalScore}"></span>
                                </td>
                                <td>
                                    <span th:if="${exam.status == 0}" class="badge bg-secondary">
                                        <i class="fas fa-clock me-1"></i>未开始
                                    </span>
                                    <span th:if="${exam.status == 1}" class="badge bg-primary">
                                        <i class="fas fa-play me-1"></i>进行中
                                    </span>
                                    <span th:if="${exam.status == 2}" class="badge bg-success">
                                        <i class="fas fa-check me-1"></i>已结束
                                    </span>
                                </td>
                                <td>
                                    <span th:if="${exam.status == 2}">
                                        <span th:if="${exam.studentScore == null}" class="score-pending">
                                            <i class="fas fa-hourglass-half me-1"></i>等待批阅
                                        </span>
                                        <span th:if="${exam.studentScore != null}" class="score-display" th:text="${exam.studentScore}"></span>
                                    </span>
                                    <span th:if="${exam.status != 2}">-</span>
                                </td>
                                <td>
                                    <a th:if="${exam.status == 0}" th:href="@{'/student/exam/start/' + ${exam.examId}}" 
                                       class="btn btn-primary btn-sm">
                                        <i class="fas fa-play me-1"></i>开始考试
                                    </a>
                                    <a th:if="${exam.status == 1}" th:href="@{'/student/exam/continue/' + ${exam.examId}}" 
                                       class="btn btn-warning btn-sm">
                                        <i class="fas fa-edit me-1"></i>继续考试
                                    </a>
                                    <a th:if="${exam.status == 2}" th:href="@{'/student/exam/detail/' + ${exam.examId}}" 
                                       class="btn btn-info btn-sm">
                                        <i class="fas fa-eye me-1"></i>查看详情
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center py-4">
        <a href="https://gitee.com/sorrymaker04/onlineexam-workload" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <div class="copyright mt-2">
            &copy; 2025 版权所有 北城在线考试系统小组 12 Team
        </div>
    </div>
</footer>
    <script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html> 